<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- ! 引入概念: 代码从上到下捕获事件,如冒泡一样.冒泡可以利用,有时页需要解除 -->
    添加数据:<input type="text" name="" value="老婆饼" id="inp"><button id="add">添加</button>
    <ul id="ul">
        <li>
            张三 <button>删除</button>
        </li>
    </ul>

    <script>
        var inp = document.getElementById("inp");
        var ul = document.getElementById("ul");
        var add = document.getElementById("add");


        add.onclick = function () {
            if (inp.value != "") {
                ul.innerHTML += "<li>" + inp.value + "<button>删除</button>" + "</li>";
            }
        }

        ul.addEventListener("click", function (e) { //e:事件对象
            if (e.target.nodeName == "BUTTON") {
                ul.removeChild(e.target.parentNode);
                // e.target.parentElement.remove();
            }
            // if(e.target.innerText == "删除"){
            //      ul.removeChild(e.target.parentNode);
            //     // e.target.parentElement.remove();
            // }
        })



    </script>
</body>

</html>